<template>
  <div>
    <div>
      <div class="head">
        <div class="headbox">
          <div class="head-txt">运营人员（当天）</div>
          <div class="head-flex">
            <div>
              <div class="flex-txt">{{ operationsStaff.total }}</div>
              <div class="flex-txt2">工单总数（个）</div>
            </div>
            <div>
              <div class="flex-txt">{{ operationsStaff.completedTotal }}</div>
              <div class="flex-txt2">完成工单（个）</div>
            </div>
            <div>
              <div class="flex-txt">{{ operationsStaff.cancelTotal }}</div>
              <div class="flex-txt2">拒绝工单（个）</div>
            </div>
            <div>
              <div class="flex-txt">{{ operationsStaff.workerCount }}</div>
              <div class="flex-txt2">运营人员数（个</div>
            </div>
          </div>
        </div>
        <div class="headbox2">
          <div class="head-txt">运营人员（当天）</div>
          <div class="head-flex">
            <div>
              <div class="flex-txt">{{ personnel.total }}</div>
              <div class="flex-txt2">工单总数（个）</div>
            </div>
            <div>
              <div class="flex-txt">{{ personnel.completedTotal }}</div>
              <div class="flex-txt2">完成工单（个）</div>
            </div>
            <div>
              <div class="flex-txt">{{ personnel.cancelTotal }}</div>
              <div class="flex-txt2">拒绝工单（个）</div>
            </div>
            <div>
              <div class="flex-txt">{{ personnel.workerCount }}</div>
              <div class="flex-txt2">运营人员数（个</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bodys">
        <div class="footer">
          <div class="footer-txt">
            工单状态
          </div>
          <div class="footer-box">
            <div>
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="valueFn"
              />
            </div>
            <div class="bodysbox">
              <div :class="{isBool:isNum === 1}" @click="box1">周</div>
              <div :class="{isBool:isNum === 2}" @click="box2">月</div>
              <div :class="{isBool:isNum === 3}" @click="box3">年</div>
            </div>
          </div>
        </div>
        <div class="txt">
          <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
          <div>空空如也</div>
        </div>
      </div>
      <div class="footerbox">
        <div class="footer-heater">
          <div class="txts">人效排名（月度）</div>
          <div class="txts2">
            <el-form ref="form" :model="editFrom" label-width="80px">
              <el-form-item>
                <el-select v-model="editFrom.id" @change="optionChange">
                  <el-option v-for="item in regionalSales" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="footer-boder">
          <div :class="{isBools: isQuery === 1}" @click="quehuan1">运营人员</div>
          <div :class="{isBools: isQuery === 2}" @click="quehuan2">运维人员</div>
        </div>
        <div v-for="item in humanEfficiencyRanking" :key="item.workCount" class="box1">
          <div class="fenkai">
            <div>
              <img src="../../assets/排名图片/第一.png" alt=""> <span class="boxtext">1</span>
            </div>
            <div>
              {{ item.userName }}
              <img v-if="item === null" src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
            </div>
          </div>
          <div>{{ item.workCount }}单</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { operationsStaffAPI, ticketStatusAPI, regionalSalesAPI, humanEfficiencyRankingAPI } from '@/api/user.js'
export default {
  data() {
    return {
      // 运营人员 (当天)
      operationsStaff: [],
      // 运维人员（当天）
      personnel: [],
      // 工单状态
      ticketStatus: [],
      // 地区销售
      regionalSales: [],
      // 人效排名
      humanEfficiencyRanking: [],
      value1: '',
      isNum: 1,
      isQuery: 1,
      start: '2022-10-10',
      editFrom: {
        id: ''
      },
      isYes: 'false'
    }
  },
  created() {
    // console.log(this.getToday())
    const endTime = dayjs(new Date().valueOf()).format('YYYY-MM-DD')
    this.value1 = [this.start, endTime]
    this.getregionalSalesAPI()
    this.getOperationsStaffAPI()
    this.gethumanEfficiencyRankingAPI()
  },
  methods: {
    // 运营人员当天
    async getOperationsStaffAPI() {
      const res = await operationsStaffAPI()
      this.operationsStaff = res[0]
      this.personnel = res[1]
      // console.log(this.operationsStaff)
      // console.log(this.personnel)
    },
    async getregionalSalesAPI() {
      const res = await regionalSalesAPI()
      this.regionalSales = res.currentPageRecords
      this.regionalSales.unshift({ remark: '全部', id: 0, name: '全部' })
      this.editFrom.id = '全部'
      // console.log(this.regionalSales)
    },
    // 人效排名
    async gethumanEfficiencyRankingAPI() {
      this.humanEfficiencyRanking = await humanEfficiencyRankingAPI(0, this.isYes)
      console.log(this.humanEfficiencyRanking)
    },
    async valueFn(vm) {
      const startTime = dayjs(vm[0]).format('YYYY-MM-DD')
      const endTime = dayjs(vm[1]).format('YYYY-MM-DD')
      this.ticketStatus = await ticketStatusAPI(startTime, endTime)
    },
    async  box1() {
      this.isNum = 1
      this.start = '2022-10-17'
      const endTime = dayjs(new Date().valueOf()).format('YYYY-MM-DD')
      this.value1 = ['2022-10-17', endTime]
      this.ticketStatus = await ticketStatusAPI(this.value1[0], this.value1[1])
      // console.log(this.ticketStatus)
    },
    async   box2() {
      this.isNum = 2
      this.start = '2022-10-01'
      const endTime = dayjs(new Date().valueOf()).format('YYYY-MM-DD')
      this.value1 = ['2022-10-01', endTime]
      this.ticketStatus = await ticketStatusAPI(this.value1[0], this.value1[1])
      // console.log(this.ticketStatus)
    },
    async   box3() {
      this.isNum = 3
      this.start = '2022-01-01'
      const endTime = dayjs(new Date().valueOf()).format('YYYY-MM-DD')
      this.value1 = ['2022-01-01', endTime]
      this.ticketStatus = await ticketStatusAPI(this.value1[0], this.value1[1])
      // console.log(this.ticketStatus)
    },
    async optionChange() {
      this.humanEfficiencyRanking = await humanEfficiencyRankingAPI(this.editFrom.id, this.isYes)
      console.log(this.humanEfficiencyRanking)
    },
    async quehuan1() {
      this.isQuery = 1
      this.isYes = 'false'
      if (this.editFrom.id === '全部') {
        this.editFrom.id = 0
      }
      this.humanEfficiencyRanking = await humanEfficiencyRankingAPI(this.editFrom.id, this.isYes)
      console.log(this.editFrom.id)
      console.log(this.humanEfficiencyRanking)
    },
    async  quehuan2() {
      this.isQuery = 2
      this.isYes = 'true'
      if (this.editFrom.id === '全部') {
        this.editFrom.id = 0
      }
      this.humanEfficiencyRanking = await humanEfficiencyRankingAPI(this.editFrom.id, this.isYes)
      console.log(this.editFrom.id)
      console.log(this.humanEfficiencyRanking)
    }
  }
}
</script>

<style lang="scss" scoped>
.head{
  // margin-bottom: 20px;
  .headbox{
    padding: 20px;
    overflow: hidden;
  float: left;
  margin-bottom: 20px;
  background-color: rgb(233, 243, 255);
    background-image: url(), url();
    background-repeat: no-repeat, no-repeat;
    background-position: 0px 0px, calc(100% - 12px) 100%;
  height: 250px;
  width: 785px;
  border-radius: 20px;
  .head-txt{
    font-weight: 600;
    margin-bottom: 60px;
  }
  .head-flex{
    // line-height: 180px;
    display: flex;
    justify-content: space-evenly;
    .flex-txt{
      text-shadow: rgb(85 132 255 / 50%) 2px 4px 7px;
      color: rgb(7, 32, 116);
      font-size: 36px;
    font-family: PingFangSC-Semibold, "PingFang SC";
    font-weight: 600;
    }
    .flex-txt2{
      color: rgb(145, 167, 220);
      font-size: 12px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-weight: 400;
    margin-top: 6px;

    }
}
}

.headbox2{
  margin-bottom: 20px;
  padding: 20px;
  overflow: hidden;
  float: right;
  height: 250px;
  width: 785px;
  border-radius: 20px;
  background: url(http://likede2-admin.itheima.net/img/operation.4120cc58.png) calc(100% - 12px) 100% no-repeat rgb(251, 239, 232);
  .head-txt{
    font-weight: 600;
    margin-bottom: 60px;
  }
  .head-flex{
    // line-height: 180px;
    display: flex;
    justify-content: space-evenly;
    .flex-txt{
      text-shadow: rgb(255 99 85 / 50%) 2px 4px 7px;
      color: rgb(255, 87, 87);
      font-size: 36px;
    font-family: PingFangSC-Semibold, "PingFang SC";
    font-weight: 600;
    }
    .flex-txt2{
      color: rgb(222, 150, 144);
      font-size: 12px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-weight: 400;
    margin-top: 6px;

    }
}
}
}
.bodys{
  overflow: hidden;
  float: left;
  width: 1200px;
  height: 680px;
  border-radius: 20px;
  background-color: #fff;
  padding: 20px;
.el-date-editor{

      width: 251px;
      height: 28px;
      ::v-deep .el-range-separator{
        line-height: 20px !important;
      }
      ::v-deep .el-input__icon{
        line-height: 20px !important;
      }
    }
}
.bodysbox{
  width: 107px;
  border-radius: 5px;
  background: rgba(233,243,255,.37);
    height: 28px;
    font-size: 14px;
    color: #9ca3b4;
    cursor: pointer;
    display: flex;
      justify-content: space-evenly;
    line-height: 28px;
    div{
      width: 25%;
      // float: left;
      text-align: center;

    }
    .isBool{
      background-color: #fff;
      border-radius: 5px;
      text-align: center;
      // height: 25px;
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    }

}
.footer{
  display: flex;
  justify-content: space-between;
  .footer-txt{
    font-weight: 700;
  }
  .footer-box{
    display: flex;
  justify-content: space-between;
  }
}
.txt{
  text-align: center;
  margin-top: 250px;
  // line-height: 640px;
}
.footerbox{
  width: 370px;
  padding: 20px;
  border-radius: 20px;
  background-color:#fff;
  height: 680px;
  float: right;
  font-weight: 600;
    color: #333;
    font-size: 14px;
    .el-select {
      width: 88px;
      margin-top: 25px;
      ::v-deep.el-input__inner{
        height: 32px !important;
      }
    }
    .footer-heater{
      // justify-content: space-evenly;

      .txts{
        width: 150px;
        height: 16px;
        // background-color: pink;
        float: left;
        margin-top: 10px;
      }
      .txts2{
        float: right;
        margin-top: -30px;
      }
    }
}
.footer-boder{
  height: 30px;
  width: 160px;
    background: rgba(233,243,255,.37);
    border-radius: 10px;
  margin-top: 50px;
  display: flex;
  justify-content: space-evenly;
  line-height: 30px;
  text-align: center;
  cursor:pointer;
  color: #dbdfe6;
  margin-left: 60px;
  div{
    width: 40%;
    height: 25px;
    line-height: 30px;
    border-radius: 5px;
    text-align: center;
    margin-top: 3px;

  }
  .isBools{
    color: black;
    width: 40%;
    height: 25px;
    line-height: 30px;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
    margin-top: 3px;
  }

}
.box1{
  position: relative;
    display: flex;
    justify-content: space-between;
    // width: 240px;
    height: 25px;
    margin-top: 15px;

    .boxtext{
     position: absolute;
     left: 6px;
    }
    .fenkai{
      width: 120px;
      // background-color: skyblue;
      display: flex;
    justify-content: space-between;
    }
  }
</style>
